<template>
  <div class="login">
    <div class="close">
      <img :src="Img.ImgSrc">
    </div>
    <form class="form">
      <!--共同头部-->
      <div class="form-title">
        <h2>穿云箭</h2>
        <p>一只穿云箭，千军万马来相见</p>
      </div>
      <!--登录-->
      <div v-show="login.ok" class="form1">
          <div class="user1 clearFix"  :style="border11">
            <label for="user"><img :src="Img.user"></label>
            <input id="user" type="email" placeholder="邮箱" v-model="userEmail" @blur="bl1" @focus="fs1">
          </div>
          <div class="password clearFix" :style="border12" >
            <label for="psw"><img :src="Img.pwd"></label>
            <input id="psw" type="password" placeholder="密码" v-model="userPWD" @blur="bl2" @focus="fs2">
            <span @click="forget">忘记密码?</span>
          </div>
          <div class="buttonLogin">
            <span @click="loginPopup">
              <button >{{loginText}}</button><!--@click="popup" -->
            </span>
          </div>
      </div>
      <!--找回密码-->
      <div v-show="login.on" class="find">
          <div>
            <h3>修改密码</h3>
          </div>
          <!--邮箱-->
          <div class="user"  :style="border4">
            <label for="user1"><img :src="Images.email"></label>
            <input id="user1" type="email"  @focus="fs4" @blur="bl4" placeholder="邮箱"   v-model="userEmail">
          </div>
          <!--邮箱验证码-->
          <div class="user" :style="border5">
            <label for="emailCode"><img :src="Images.emailGet"></label>
            <input id="emailCode" type="text" @focus="fs5" @blur="bl5" placeholder="请输入邮箱验证码" v-model="emailCode">
            <span><button :disabled="disabled" id="obtain" @click="obtain11">获取</button></span>
          </div>
          <!--密码-->
          <div class="user"  :style="border6">
            <label for="psw1"><img :src="Images.pwd"></label>
            <input id="psw1" type="password" @focus="fs6" @blur="bl6" placeholder="请输入新密码" v-model="userPWDnew">
          </div>
          <!--邀请码-->
          <div class="user"  :style="border7">
            <label for="request"><img :src="Images.pwd1"></label>
            <input id="request" type="password" @focus="fs7" @blur="bl7" placeholder="请确认密码" v-model="userPWD2">
          </div>
          <div class="button">
            <button @click="modify11">确认修改/登录</button>
          </div>
      </div>
    </form>
    <!--灰色背景罩-->
    <div class="email-up" v-show="emailBox.ok" @click="closeEmail">
        <!--前往邮箱-->
        <div class="email-box" v-show="emailBox.ok">
          <div class="email-box1">
            <div>
              <p>邮件已发送至<span>{{userEmail}}</span></p>
              <p>请前往邮箱确认更改，有效期10分钟</p>
              <p><button>前往邮箱</button></p>
            </div>
          </div>
        </div>
    </div>
  </div>
</template>
<script>
  //密码
  import pwdImg2 from '../../assets/icon_password_sign.png'
  import pwdImg11 from '../../assets/icon_password_sign_mark.png'
  //右侧验证码
  import verification from '../../assets/icon_verification_image.png'
  import verification1 from '../../assets/icon_verification_image_mark.png'
  //邮箱
  import email from '../../assets/icon_verification_email.png'
  import email1 from '../../assets/icon_verification_email_mark.png'
  //验证码
  import emailGet from '../../assets/icon_email.png'
  import emailGet1 from '../../assets/icon_email_mark.png'

  import imgLogo from '../../assets/LOGO_color.png'
  import userImg from '../../assets/icon_user_sign.png'
  import userImg1 from '../../assets/icon_user_sign_mark.png'
  import pwdImg from '../../assets/icon_password_sign.png'
  import pwdImg1 from '../../assets/icon_password_sign_mark.png'
  export default{
      data (){
          return{
              //前往邮箱弹框显示
              emailBox:{
                  ok:false
              },
              //登录与忘记密码弹框显示
              login:{
                ok:true,
                on:false
              },
              Img:{
                ImgSrc:imgLogo,
                user:userImg,
                pwd:pwdImg,
              },
              border12:{
                  borderBottomColor:''
              },
              border11:{
                  borderBottomColor:''
              },
              userEmail:'',
              userPWD:'',
              loginText:'登录',
              token:'',
            //忘记密码
            Images:{
              email:email,
              emailGet:emailGet,
              pwd:pwdImg2,
              pwd1:pwdImg2
            },
            border4:{
              borderBottomColor:'',
            },
            border5:{
              borderBottomColor:'',
            },
            border6:{
              borderBottomColor:'',
            },
            border7:{
              borderBottomColor:'',
            },
            //focusStatus:false,
            userEmail:'',
            //新密码
            userPWDnew:'',
            //验证码
            rerifyCode:'',
            //邮箱验证码
            emailCode:'',
            //确认密码
            userPWD2:'',
            //邮箱验证码
            leftText:'获取',
            disabled:false,
          }
      },
    //方法
    methods:{
      //忘记密码
      forget:function () {
          let _self = this;
          _self.$set(_self.login,'ok',false);
          _self.$set(_self.login,'on',true);
//          _self.popup();//调用登录函数
      },
      //获取邮箱验证码
      obtain11:function(){
          var _self = this;
          _self.disabled = true;
          _self.leftText ='已发送',
          _self.$set(_self.emailBox,'ok',true)
      },
      //关闭前往邮箱窗口
      closeEmail: function () {
          console.log(6666)
        var _self = this;
        _self.$set(_self.emailBox, 'ok', false);
      },
      //修改密码
      modify11:function () {
        console.log(12451245);
        let _self = this;
        _self.loginPopup();
        //路由转跳
//        _self.$router.go('/account/myselfData');
//        _self.$router.push({path:'/account/myselfData'})
      },
      loginPopup:function () {//点击登录事件
          console.log(7666666);
          var _self= this;
          _self.loginText ='登录中...'
          _self.$emit('listenLogin',false);
          _self.token = '123456'
         sessionStorage.setItem("token", JSON.stringify(_self.token));
      },
      //点击登录事件
      popup:function () {
           var _self=this;
           console.log('点击登录');
           //改变登录按钮文字
//           _self.loginText ='登录中...'
         //定时执行的事件（暂时占位）
//         setTimeout(function () {
//           _self.$emit('listenLogin',false);
//           _self.loginText ='登录',
//           console.log(_self.token)
//           _self.token = '123456'
//           sessionStorage.setItem("token", JSON.stringify(_self.token));
////           window.location.href = '/client';
//         },3000)
       },
       //第一个input失去焦点与获得焦点样式改变
       bl1:function () {
           console.log('失去焦点')
           var _self = this;
           _self.$set(this.Img,'user',userImg);
           _self.$set(this.border11,'borderBottomColor','rgba(123,128,128,0.2)');
       },
       fs1:function () {
           console.log('获得焦点')
           this.$set(this.Img,'user',userImg1);
           this.$set(this.border11,'borderBottomColor','#FF7A3F');
       },
      //第二个input输入框的获取与失去焦点事件
      bl2:function () {
          var _self = this;
          _self.$set(this.Img,'pwd',pwdImg);
          _self.$set(this.border12,'borderBottomColor','rgba(123,128,128,0.2)');
      },
      fs2:function () {
          this.$set(this.Img,'pwd',pwdImg1);
          this.$set(this.border12,'borderBottomColor','#FF7A3F');
      },
      //失去焦点
      bl4:function () {
          var _self = this;
          _self.$set(_self.Images,'email',email);
          _self.$set(_self.border4,'borderBottomColor','rgba(123,128,128,0.2)');
      },
      //获得焦点
      fs4:function () {
          var _self = this;
          _self.$set(_self.Images,'email',email1);
          _self.$set(_self.border4,'borderBottomColor','#FF7A3F');
      },
      //失去焦点
      bl5:function () {
          var _self = this;
          _self.$set(_self.Images,'emailGet',emailGet);
          _self.$set(_self.border5,'borderBottomColor','rgba(123,128,128,0.2)');
      },
      //获得焦点
      fs5:function () {
          var _self = this;
          _self.$set(_self.Images,'emailGet',emailGet1);
          _self.$set(_self.border5,'borderBottomColor','#FF7A3F');
      },
      //失去焦点
      bl6:function () {
          var _self = this;
          _self.$set(_self.Images,'pwd',pwdImg2);
          _self.$set(_self.border6,'borderBottomColor','rgba(123,128,128,0.2)');
      },
      //获得焦点
      fs6:function () {
          var _self = this;
          _self.$set(_self.Images,'pwd',pwdImg11);
          _self.$set(_self.border6,'borderBottomColor','#FF7A3F');
      },
      //失去焦点
      bl7:function () {
          var _self = this;
          _self.$set(_self.Images,'pwd1',pwdImg2);
          _self.$set(_self.border7,'borderBottomColor','rgba(123,128,128,0.2)');
      },
      //获得焦点
      fs7:function () {
          var _self = this;
          _self.$set(_self.Images,'pwd1',pwdImg11);
          _self.$set(_self.border7,'borderBottomColor','#FF7A3F');
      },
    },
    //实例建立后执行
    mounthed:{

    }
  }

</script>
<style scoped>
  div,h2,h3,p{
    margin: 0;
    padding: 0;
  }
  img{
    max-height: 100%;
    max-width:100%
  }
  input{
    border: 0;
    text-indent: 1rem;
    outline:none
  }
  .login{
    position: fixed;
    top:50%;
    left: 50%;
    height: auto;
    width: 600px;
    margin-left: -300px;
    margin-top: -250px;
    z-index: 9999;
    overflow: hidden;
    font-size: 0;
  }
  /*头部logo*/
  .close{
    margin:0 auto;
    width: 100px;
    height: 50px;
    background-color: #ffffff;
    border-radius: 100px 100px 0 0;
  }
  .close img{
    margin-top: 20px;
  }
  /*表单样式*/
  .form{
    text-align: center;
    background-color: #ffffff;
    padding: 15px 0 0 0;
    margin: 0;
  }
  .form .form-title h2{
    padding: 0;
    margin: 0;
    height: 50px;
    font-size: 1.0rem;
    font-weight: 100;
    color:#FF7A3F;
  }
  .form .form-title p{
    padding: 0 0 30px 0;
    margin: 0;
    height: 60px;
    font-size: 0.7rem;
    font-weight: 100;
    color:#FF7A3F;
  }
  .form1 div{
    width: 50%;
    margin: auto;
    line-height: 50px;
  }
  .form1 .user1{/**/
    margin: auto;
    border-bottom: 1px solid rgba(123,128,128,0.2);
    width: 50%;
    text-align: left;
    vertical-align: bottom;
  }
  .form1 .password{
    margin: 20px auto;
    border-bottom: 1px solid rgba(123,128,128,0.2);
    width: 50%;
    text-align: left;
    vertical-align: bottom;
  }
  .form1 .password span{
    font-size: 0.7rem;
    text-align: right;
    cursor: pointer;
    float: right;
    padding-right: 5px;
  }
  .form1 .password span:hover{
    color:#FF7A3F;
  }
  .form1 label{
    display: inline-block;
    height: 50px;
    float: left;
    vertical-align: middle;
  }
  .form1 label img{
    vertical-align: middle;
  }
  .form1 input{
    float: left;
    display: inline-block;
    height: 50px;
  }
  .form1 .buttonLogin{
    padding-bottom: 75px;
  }
  .form1 .buttonLogin span{
    width: 100%;
  }
  .form1 .buttonLogin span button{
    width: 100%;
    height: 2rem;
    background-color: #FF7A3F;
    color: #ffffff;
    border: 0;
    /*margin: 0 0 100px 0 ;*/
  }
  .form1 button:hover{
    background-color: red;
    cursor: pointer;
  }

  /*找回密码*/
  /*找回密码样式*/
  .find{
    width: 50%;
    margin: auto;
  }
  .find .user{/**/
    margin: auto;
    border-bottom: 1px solid rgba(123,128,128,0.2);
    width: 100%;
    text-align: left;
  }
  .find div:first-child{
    padding: 0;
  }
  .find div{
    width: 50%;
    margin: auto;
    line-height: 50px;
    vertical-align: bottom;
  }
  .find h3{
    font-size: 1.2rem;
    font-weight: 100;
    color:#515151;
    margin: 0;
  }
  .find p{
    font-size: 0.8rem;
    font-weight: 100;
    color:#FF7A3F;
    /*padding: 20px 0 10px;*/
  }
  .find .user{
    margin: auto;
    border-bottom: 1px solid rgba(123,128,128,0.2);
    /*width: 80%;*/
    text-align: left;
  }

  .find span{
    font-size: 0.5rem;
    text-align: right;
    cursor: pointer;
    float: right;
  }
  .find .password span:hover{
    color:#FF7A3F;
  }
  #obtain{
    border: 0;
    padding: 5px 2px;
    /*width: 55px;*/
    color: #ffffff;
    background-color: #FF7A3F;

    outline: none;
    border-radius: 2px;
    cursor: pointer;
  }
  .find .button button{
    width: 80%;
    height: 2rem;
    background-color: #FF7A3F;
    color: #f5f5f5;
    border: 0;
    margin: -10px 0 30px 0 ;
    outline: none;
    border-radius: 2px;
  }
  .find .button button:hover{
    background-color: red;
    cursor: pointer;
  }
  /*清除浮动*/
  .clearFix:after{
    content: '';
    clear: both;
    display: block;
  }

  #obtain{
    border: 0;
    padding: 5px 2px;
    width: 55px;
    color: #ffffff;
    background-color: #FF7A3F;
    margin-top: -6px;
    outline: none;
    border-radius: 2px;
    cursor: pointer;
  }
  /*前往邮箱样式集合*/
  .email-box{
    position: fixed;
    top:50%;
    left: 50%;
    height: 200px;
    width: 400px;
    margin-left: -200px;
    margin-top: -100px;
    z-index: 9999;
    overflow: hidden;
    font-size: 0;
    background: #ffffff;
  }
  .email-box1{
    display: table;
    vertical-align:middle;
    text-align: center;
    margin: auto;
    height: 100%;
  }
  .email-box1 div{
    margin: auto;
    display: table-cell;
    vertical-align:middle;
    text-align: center;

  }
  .email-box1 div button{
    width: 80%;
    height: 2rem;
    background-color: #FF7A3F;
    color: #f5f5f5;
    border: 0;
    margin: 10px 0 30px 0 ;
    outline: none;
    border-radius: 2px;

  }
  .email-box1 div button:hover{
    background-color: red;
    cursor: pointer;

  }

  .email-box div p{
    padding: 0;
    margin: 0;
    /*display: table-cell;*/
    /*vertical-align: middle;*/
  }
  .email-up{
    background: rgba(0, 0, 0, 0.25);
    color: rgb(232, 232, 232);
    line-height: 1.2;
    white-space: pre;
    font-family: Menlo, Consolas, monospace;
    font-size: 13px;
    position: fixed;
    z-index: 6666;
    padding: 10px;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    overflow: auto;
    text-align: left;
  }

</style>
